<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="generator" content=
        "HTML Tidy, see www.w3.org" />

        <title></title>
        <meta http-equiv="content-type" content=
        "text/html; charset=utf-8" />

        <title>Google Visualization API Sample</title>
        <link rel="stylesheet" type="text/css" href=
        "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
    </head>

    <body style="font-family: Arial;border: 0 none;">
<script type="text/javascript" src="http://www.google.com/jsapi">
        
</script>
<script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
        
</script>
<script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js">


        
</script>
<script type="text/javascript">
                                    $(document).ready(function(){           
                                        $("#dialog").dialog({
                                                            autoOpen: false,
                                                            modal: true,
                                                            resizable: false
                                                    });
                                            
                                            $('#opener').click(function() {
                                             
                                        $("#dialog").dialog('open');
                                         });
                                                    
                                            });  
                                      
                                          
                                           google.load('visualization', '1', {packages: ['geomap']});
                                    
                                        var geomap = null;
                                        var data = null;
                                        var options = null;
                                        var hidemap = null;
                                    
                                            function initializeMap() {
                                    
                                            data = new google.visualization.DataTable();
                                    
                                            data.addRows(50);
                                    
                                            data.addColumn('string', 'State');
                                            data.addColumn('number', 'Value');
                                    
                                            data.setValue(0,0, 'Alabama');
                                            data.setValue(1,0, 'Alaska');
                                            data.setValue(2,0, 'Arizona');
                                            data.setValue(3,0, 'Arkansas');
                                            data.setValue(4,0, 'California');
                                            data.setValue(5,0, 'Colorado');
                                            data.setValue(6,0, 'Connecticut');
                                            data.setValue(7,0, 'Delaware');
                                            data.setValue(8,0, 'Florida');
                                            data.setValue(9,0,'Georgia');
                                            data.setValue(10,0,'Hawaii');
                                            data.setValue(11,0,'Idaho');
                                            data.setValue(12,0,'Illinois');
                                            data.setValue(13,0,'Indiana');
                                            data.setValue(14,0,'Iowa');
                                            data.setValue(15,0,'Kansas');
                                            data.setValue(16,0,'Kentucky');
                                            data.setValue(17,0,'Louisiana');
                                            data.setValue(18,0,'Maine');
                                            data.setValue(19,0,'Maryland');
                                            data.setValue(20,0,'Massachusetts');
                                            data.setValue(21,0,'Michigan');
                                            data.setValue(22,0,'Minnesota');
                                            data.setValue(23,0,'Mississippi');
                                            data.setValue(24,0,'Missouri');
                                            data.setValue(25,0,'Montana');
                                            data.setValue(26,0,'Nebraska');
                                            data.setValue(27,0,'Nevada');
                                            data.setValue(28,0,'New Hampshire');
                                            data.setValue(29,0,'New Jersey');
                                            data.setValue(30,0,'New Mexico');
                                            data.setValue(31,0,'New York');
                                            data.setValue(32,0,'North Carolina');
                                            data.setValue(33,0,'North Dakota');
                                            data.setValue(34,0,'Ohio');
                                            data.setValue(35,0,'Oklahoma');
                                            data.setValue(36,0,'Oregon');
                                            data.setValue(37,0,'Pennsylvania');
                                            data.setValue(38,0,'Rhode Island');
                                            data.setValue(39,0,'South Carolina');
                                            data.setValue(40,0,'South Dakota');
                                            data.setValue(41,0,'Tennessee');
                                            data.setValue(42,0,'Texas');
                                            data.setValue(43,0,'Utah');
                                            data.setValue(44,0,'Vermont');
                                            data.setValue(45,0,'Virginia');
                                            data.setValue(46,0,'Washington');
                                            data.setValue(47,0,'West Virginia');
                                            data.setValue(48,0,'Wisconsin');
                                            data.setValue(49,0,'Wyoming');
                                    
                                            for (var i = 0; i < 50; i++) {
                                    
                                                data.setValue(i,1,0);
                                    
                                            }
                                    
                                            options = {};
                                            options['region'] = 'US';
                                            options['showLegend'] = false;
                                            options['color'] = [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114]
                                    
                                            geomap = new google.visualization.GeoMap($('#visualization'));
                                            hidemap = new google.visualization.GeoMap($('#hide'));
                                            
                                            geomap.draw(data, options);
                                    
                                            google.visualization.events.addListener(geomap, 'select', selectHandler);
                                            google.visualization.events.addListener(hidemap, 'select', selectHandler);
                                    
                                    }
                                    
                                            function selectHandler() {
                                                            
                                              var geo = $('#visualization');
                                              var hide = $('#hide');
                                    
                                              if (geo.style.visibility == "visible") {
                                                  var map = geomap;
                                                    var other = hidemap;
                                                }
                                            else {
                                                var map = hidemap;
                                                            var other = geomap;
                                                    }
                                                    
                                                    var selection = map.getSelection();
                                                    
                                                    if (data.getValue(selection[0].row,1) == 1)
                                                            data.setValue(selection[0].row,1,0);
                                                    else
                                                            data.setValue(selection[0].row,1,1);
                                              //$("#dialog").dialog('open');
                                                    other.draw(data,options);
                                              
                                                    updateList();
                                    
                                                    setTimeout('hide()',700);
                                                    
                                            }
                                    
                                        function hide(){
                                    
                                            var old = $('#visualization'); 
                                    
                                            var obj = $('#hide');
                                    
                                            if (old.style.visibility == "visible"){
                                    
                                                old.style.visibility = "hidden";
                                                obj.style.visibility = "visible";
                                    
                                            } 
                                    
                                            else {  
                                    
                                                obj.style.visibility = "hidden";
                                                old.style.visibility = "visible";
                                    
                                            }
                                    
                                        }
                                        function updateList(){
                                        
                                                var obj=$('#list');
                                        
                                                var listOfName="Selection :";
                                        
                                                for (var i = 0; i < 50; i++) {
                                        
                                                   if (data.getValue(i,1)==1)
                                                   {
                                        
                                                      listOfName=listOfName+" "+data.getValue(i,0)+";";
                                        
                                                   }
                                        
                                                }
                                        
                                                obj.innerHTML=listOfName;
                                        
                                           }
                                    
                                       function clearState(){
                                      
                                           var geo = $('#visualization');
                                            var hide = $('#hide');
                                    
                                            if (geo.style.visibility == "visible") {
                                                var map = geomap;
                                                 var other = hidemap;
                                                    }
                                            else {
                                                var map = hidemap;
                                                 var other = geomap;
                                                    }
                                                      
                                             for (var i = 0; i < 50; i++) {
                                    
                                                data.setValue(i,1,0);
                                    
                                             }
                                      
                                        other.draw(data,options);
                                    
                                            updateList();
                                      
                                        setTimeout('hide()',700);
                                      
                                      
                                        }
                                      google.setOnLoadCallback(initializeMap);
                                    
                                    
                                        
                                
                    
        
</script>

        <div id="visualization" style="position:absolute ;width: 600px; height: 600px;visibility:visible">
        </div>

        <div id="hide" style="position:absolute; width: 600px; height: 600px; visibility:hidden">
        </div>

        <div id="list" style="position:relative; top:350px">
        </div>

        <div>
            <form style="position:relative; top:280px; left:0px">
                <input type="button" value="clear" />
            </form>
        </div>
        <button id="opener" style="position:relative; top:280px; left:0px">Open the dialog</button> 

        <div id="dialog">
        </div>
    </body>
</html>

